<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>购物车 - 在线购物商城</title>
   <link rel="stylesheet" href="../css/cart.css">
</head>
<body>
   <div class="header">
       <div class="header-content">
           <a href="/" class="logo">在线购物商城</a>
           <div class="search-box">
               <input type="text" placeholder="请输入商品名称">
               <button class="search-btn">搜索</button>
           </div>
       </div>
   </div>
    <div class="container">
       <div class="cart-header">
           <h2>购物车</h2>
           <span class="cart-count">全部商品(2)</span>
       </div>
        <div class="cart-content">
           <div class="cart-table-header">
               <span class="col-checkbox"></span>
               <span class="col-goods">商品信息</span>
               <span class="col-price">单价</span>
               <span class="col-quantity">数量</span>
               <span class="col-total">小计</span>
               <span class="col-action">操作</span>
           </div>
            <div class="cart-items">
               <div class="cart-item">
                   <div class="item-checkbox">
                       <input type="checkbox">
                   </div>
                   <div class="item-info">
                       <img src="path/to/product-image.jpg" alt="商品图片">
                       <div class="item-details">
                           <div class="item-title">冬天的温暖毛衣</div>
                       </div>
                   </div>
                   <div class="item-price">¥133.00</div>
                   <div class="item-quantity">
                       <button class="quantity-btn minus">-</button>
                       <input type="text" value="1" class="quantity-input">
                       <button class="quantity-btn plus">+</button>
                   </div>
                   <div class="item-total">¥133.00</div>
                   <div class="item-action">
                       <a href="#" class="delete-btn">删除</a>
                   </div>
               </div>
                <div class="cart-item">
                   <div class="item-checkbox">
                       <input type="checkbox">
                   </div>
                   <div class="item-info">
                       <img src="path/to/product-image.jpg" alt="商品图片">
                       <div class="item-details">
                           <div class="item-title">棉衣男冬季新款港风外套</div>
                       </div>
                   </div>
                   <div class="item-price">¥99.80</div>
                   <div class="item-quantity">
                       <button class="quantity-btn minus">-</button>
                       <input type="text" value="1" class="quantity-input">
                       <button class="quantity-btn plus">+</button>
                   </div>
                   <div class="item-total">¥99.80</div>
                   <div class="item-action">
                       <a href="#" class="delete-btn">删除</a>
                   </div>
               </div>
           </div>
       </div>
        <div class="cart-footer">
           <div class="footer-left">
               <label class="checkbox-wrapper">
                   <input type="checkbox" class="select-all">
                   <span>全选</span>
               </label>
           </div>
           <div class="footer-right">
               <div class="total-info">
                   <span>已选择 <em>2</em> 件商品</span>
                   <span class="total-price">合计：<em>¥232.80</em></span>
               </div>
               <button class="checkout-btn">结算</button>
           </div>
       </div>
   </div>
    <!-- <script src="cart.js"></script> -->
     <script>
        document.addEventListener('DOMContentLoaded', function() {
    // 获取所有数量按钮和输入框
    const cartItems = document.querySelectorAll('.cart-item');
    const totalPriceElement = document.querySelector('.total-price em');
    const selectedCountElement = document.querySelector('.total-info em');
    const selectAllCheckboxes = document.querySelectorAll('.select-all');
    
    // 为每个商品添加事件监听
    cartItems.forEach(item => {
        const minusBtn = item.querySelector('.minus');
        const plusBtn = item.querySelector('.plus');
        const quantityInput = item.querySelector('.quantity-input');
        const checkbox = item.querySelector('input[type="checkbox"]');
        const priceElement = item.querySelector('.item-price');
        const totalElement = item.querySelector('.item-total');
        
        // 获取单价（去掉¥符号并转换为数字）
        const price = parseFloat(priceElement.textContent.replace('¥', ''));
        
        // 更新小计
        function updateItemTotal() {
            const quantity = parseInt(quantityInput.value);
            const total = (price * quantity).toFixed(2);
            totalElement.textContent = `¥${total}`;
            updateCartTotal();
        }
        
        // 减少数量
        minusBtn.addEventListener('click', () => {
            let quantity = parseInt(quantityInput.value);
            if (quantity > 1) {
                quantityInput.value = quantity - 1;
                updateItemTotal();
            }
        });
        
        // 增加数量
        plusBtn.addEventListener('click', () => {
            let quantity = parseInt(quantityInput.value);
            quantityInput.value = quantity + 1;
            updateItemTotal();
        });
        
        // 手动输入数量
        quantityInput.addEventListener('change', () => {
            let quantity = parseInt(quantityInput.value);
            if (isNaN(quantity) || quantity < 1) {
                quantityInput.value = 1;
            }
            updateItemTotal();
        });
        
        // 复选框变化
        checkbox.addEventListener('change', () => {
            updateCartTotal();
        });
    });
    
    // 全选功能
    selectAllCheckboxes.forEach(selectAll => {
        selectAll.addEventListener('change', () => {
            const isChecked = selectAll.checked;
            // 同步所有全选框的状态
            selectAllCheckboxes.forEach(checkbox => {
                checkbox.checked = isChecked;
            });
            // 更新所有商品的选中状态
            cartItems.forEach(item => {
                item.querySelector('input[type="checkbox"]').checked = isChecked;
            });
            updateCartTotal();
        });
    });
    
    // 更新购物车总计
    function updateCartTotal() {
        let totalPrice = 0;
        let selectedCount = 0;
        
        cartItems.forEach(item => {
            const checkbox = item.querySelector('input[type="checkbox"]');
            if (checkbox.checked) {
                const total = parseFloat(item.querySelector('.item-total').textContent.replace('¥', ''));
                totalPrice += total;
                selectedCount++;
            }
        });
        
        // 更新总价和选中数量
        totalPriceElement.textContent = `¥${totalPrice.toFixed(2)}`;
        selectedCountElement.textContent = selectedCount;
        
        // 更新全选框状态
        const allChecked = selectedCount === cartItems.length;
        selectAllCheckboxes.forEach(checkbox => {
            checkbox.checked = allChecked;
        });
    }
}); 
     </script>
</body>
</html>